<!--
 * @Author       : ionluo(2437403125@qq.com)
 * @Description  :
 * @Date         : 2024-05-11 22:56:57
-->

<template>
  <div class="total-users">
    <common-card title="累计用户数" value="1,087,503">
      <template>
        <div id="total-users-chart" :style="{ width: '100%', height: '100%' }"/>
      </template>
      <template v-slot:footer>
        <span>日同比</span>
        <span class="emphasis">8.73%</span>
        <span class="increase"></span>
        &nbsp;
        <span>月同比</span>
        <span class="emphasis">35.91%</span>
        <span class="decrease"></span>
      </template>
    </common-card>
  </div>
</template>

<script>
import commonCardMixins from '@//mixins/commonCardMixins'

let chatResizeFn = _ => {}
export default {
  name: 'TodayUsers',
  mixins: [commonCardMixins],
  data () {
    return {

    }
  },
  mounted () {
    const myChart = this.$echarts.init(document.getElementById('total-users-chart'))
    // 感觉用 element-ui 的 process 进度条也可以实现
    myChart.setOption({
      xAxis: {
        type: 'value', // 坐标轴类型，值category/value, 默认是 value
        show: false // 隐藏坐标轴
      },
      yAxis: {
        type: 'category',
        show: false
      },
      series: [{ // 绿色进度
        type: 'bar',
        stack: '总量', // 相同系列的图表合并
        data: [100],
        barWidth: 10, // 10px
        itemStyle: {
          color: '#45c946'
        }
      }, { // 底部进度
        type: 'bar',
        stack: '总量', // 相同系列的图表合并
        data: [250],
        barWidth: 10, // 10px
        itemStyle: {
          color: '#eee'
        },
        emphasis: { // !!! 不加默认鼠标悬浮会变成白色
          itemStyle: {
            color: '#eee'
          }
        }
      }, { // 绿色三角标
        type: 'custom',
        stack: '总量', // 相同系列的图表合并
        data: [100],
        renderItem: (params, api) => {
          // console.log(params/* 绘图相关的数据 */, api /* 绘图相关的api */)
          const value = api.value(0) // 上面的data的第一个数据，也就是200
          const endPoint = api.coord([value, 0]) // 计算value应该放到哪个位置

          return {
            type: 'group',
            position: endPoint,
            children: [{
              type: 'path',
              shape: {
                d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.995z', // svg的path，可以从iconfont里面找到然后放到这里
                x: -5,
                y: -20,
                width: 10,
                height: 10,
                layout: 'cover' // 指定缩放策略，完全填满矩形，不会超出矩形
              },
              style: {
                fill: '#45c946'
              }
            }, {
              type: 'path',
              shape: {
                d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z', // svg的path，可以从iconfont里面找到然后放到这里
                x: -5,
                y: 10,
                width: 10,
                height: 10,
                layout: 'cover' // 指定缩放策略，完全填满矩形，不会超出矩形
              },
              style: {
                fill: '#45c946'
              }
            }]
          }
        }
      }],
      grid: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }
    })
    // resize 重绘
    chatResizeFn = myChart.resize
    window.addEventListener('resize', chatResizeFn)
  },
  beforeDestroy () {
    window.removeEventListener('resize', chatResizeFn)
  }
}
</script>

<style lang="scss" scoped></style>
